*{
	padding: 0;
	margin: 0;
}
body{
	background: #ccc;
}
a,a:link{
	color: white;
	text-decoration: none;
}
#wallpaper{
	padding: 50px 0;
}
.img{
	width: 620px;
	height: 400px;
	overflow: hidden;
	margin: 0 auto;
	cursor: pointer;
	position: relative;
}
.content{
	position: absolute;
	top: 0;
	padding: 15px;
	width: 100%;
	height: 100%;
}
.content>h1{
	transform: translateY(50px);
	transition: transform .4s ease;

}

.img:hover h1{
	transform: translateY(0px);
}

.btn{
	position: absolute;
	bottom: 60px;
	right:120px;
}

.img::before{
	content: "";
	background:rgba(255 , 255 , 255 , .7);
	position: absolute;
	width: 100%;
	height: 0;
	bottom: -1px;
	right: -1px;
	clip-path: polygon(0 100%, 100% 0, 100% 100%);
	transition: .4s;
}
.img:hover:before{
	height: 50%;
}
.item{
	position: absolute;	
	transition: all .8s ease;
	top: 0;
}
.img .item:nth-child(1){
	left: -25px;
	transition-delay: .1s;
}
.img .item:nth-child(2){
	left: 0px;
	transition-delay: .2s;
}
.img .item:nth-child(3){
	left: 25px;
	transition-delay: .3s;
}

.img:hover .item{
	top: -50px;
}
.item:hover{
	color: seagreen;
}
